from dash import Dash, dcc, html
from dash.dependencies import Input,Output,State
from matplotlib.font_manager import FontProperties
from src.common.utils.wraper_fig import wraper_fig
from src.core.churn_prediction.churn_predection import churn_risk

def register_callbacks(app):
    @app.callback(
        [
            Output('churn-plot', component_property='src'), 
            Output('top-churn-table','children')
        ],
        [Input('submit-button', 'n_clicks')],
        [State('input-id', 'value')],
        prevent_initial_call=True
    )

    def update_dashborad(n_clicks, name):
        if not name:
            return ["", html.Div()]
        churn_plot, churn_table = churn_risk(name)
        return [
            wraper_fig(churn_plot),
            churn_table
        ]

def create_layout():
    return html.Div(
        children=[
            html.Header([
                    html.H1('📉 用户流失预测分析',
                           style={'color': '#2c3e50', 'marginBottom': '20px'}),
                    html.Div([
                            dcc.Input(
                                id='input-id',
                                type='text',
                                placeholder='请输入软件/网页名称...',
                                debounce=True,
                                style={
                                    'flex': 1,
                                    'padding': '12px',
                                    'border': '2px solid #e74c3c',
                                    'borderRadius': '8px',
                                    'fontSize': '16px'
                                }
                            ),
                            html.Button(
                                '开始分析 🔍',
                                id='submit-button',
                                n_clicks=0,
                                style={
                                    'marginLeft': '10px',
                                    'padding': '12px 24px',
                                    'backgroundColor': '#e74c3c',
                                    'color': 'white',
                                    'border': 'none',
                                    'borderRadius': '8px',
                                    'cursor': 'pointer',
                                    'transition': 'all 0.3s',
                                    ':hover': {
                                        'backgroundColor': '#c0392b',
                                        'transform': 'scale(1.05)'
                                    }
                                }
                            )
                        ],
                        style={
                            'display': 'flex',
                            'maxWidth': '800px',
                            'margin': '0 auto',
                            'padding': '20px'
                        }
                    )
                ],
                style={
                    'backgroundColor': '#f8f9fa',
                    'padding': '2rem',
                    'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                }
            ),

            html.Main([
                    html.Div([
                            html.Article([
                                html.H2('📈 流失风险趋势',
                                       style={'color': '#34495e', 'marginBottom': '15px'}),
                                dcc.Loading(
                                    id='churn-plot-loading',
                                    type='circle',
                                    children=html.Div(
                                        html.Img(
                                            id='churn-plot',
                                            style={
                                                'maxWidth': '100%',
                                                'height': '400px',
                                                'objectFit': 'contain'
                                            }),
                                        style={
                                            'backgroundColor': 'white',
                                            'padding': '20px',
                                            'borderRadius': '8px',
                                            'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                            'marginBottom': '20px'
                                        }
                                    )
                                )
                            ]),

                            html.Article([
                                html.H2('🚨 高风险用户 TOP5',
                                       style={'color': '#34495e', 'marginBottom': '15px'}),
                                dcc.Loading(
                                    id='table-loading',
                                    type='circle',
                                    children=html.Div(
                                        id='top-churn-table',
                                        style={
                                            'backgroundColor': 'white',
                                            'padding': '20px',
                                            'borderRadius': '8px',
                                            'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                                        }
                                    )
                                )
                            ])
                        ],
                        style={
                            'maxWidth': '1200px',
                            'margin': '0 auto',
                            'padding': '20px'
                        }
                    )
                ],
                style={'padding': '20px'}
            )
        ],
        style={
            'fontFamily': 'Segoe UI, system-ui',
            'minHeight': '100vh',
            'backgroundColor': '#ecf0f1'
        }
    )

def init_churn_predection_dash(server):
    app = Dash(
        __name__,
        server=server,
        url_base_pathname='/churn_predection/'
    )

    app.layout = create_layout()
    
    register_callbacks(app)

    return app